<template>
  <div :style='{"width":"1100px","padding":"30px","margin":"10px auto","position":"relative","background":"#efefef"}'>
    <el-form
        class="add-update-preview"
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="110px"
    >
      <el-form-item :style='{"padding":"10px","margin":"0 0 10px","background":"#fff"}' label="预订编号"
                    prop="yudingbianhao">
        <el-input v-model="ruleForm.yudingbianhao" placeholder="预订编号" readonly></el-input>
      </el-form-item>
      <el-form-item :style='{"padding":"10px","margin":"0 0 10px","background":"#fff"}' label="客房名称"
                    prop="kefangmingcheng">
        <el-input v-model="ruleForm.kefangmingcheng" disabled
                  placeholder="客房名称" clearable></el-input>
      </el-form-item>
      <el-form-item :style='{"padding":"10px","margin":"0 0 10px","background":"#fff"}' label="客房类型"
                    prop="kefangleixing">
        <el-input v-model="ruleForm.kefangleixing" disabled
                  placeholder="客房类型" clearable></el-input>
      </el-form-item>
      <el-form-item :style='{"padding":"10px","margin":"0 0 10px","background":"#fff"}' label="客房图片"
                    v-if="type!='cross' || (type=='cross' && !ro.kefangtupian)" prop="kefangtupian">
        <file-upload
            tip="点击上传客房图片"
            action="file/upload"
            :limit="3"
            :multiple="true"
            :fileUrls="ruleForm.kefangtupian?ruleForm.kefangtupian:''"
            @change="kefangtupianUploadChange"
        ></file-upload>
      </el-form-item>
      <el-form-item :style='{"padding":"10px","margin":"0 0 10px","background":"#fff"}' class="upload" v-else
                    label="客房图片" prop="kefangtupian">
        <img v-if="ruleForm.kefangtupian.substring(0,4)=='http'" class="upload-img" style="margin-right:20px;"
             v-bind:key="index" :src="ruleForm.kefangtupian.split(',')[0]" width="100" height="100">
        <img v-else class="upload-img" style="margin-right:20px;" v-bind:key="index"
             v-for="(item,index) in ruleForm.kefangtupian.split(',')" :src="baseUrl+item" width="100" height="100">
      </el-form-item>
      <el-form-item :style='{"padding":"10px","margin":"0 0 10px","background":"#fff"}' label="酒店名称"
                    prop="jiudianmingcheng">
        <el-input v-model="ruleForm.jiudianmingcheng" disabled
                  placeholder="酒店名称" clearable></el-input>
      </el-form-item>
      <el-form-item :style='{"padding":"10px","margin":"0 0 10px","background":"#fff"}' label="酒店地址"
                    prop="jiudiandizhi">
        <el-input v-model="ruleForm.jiudiandizhi" disabled
                  placeholder="酒店地址" clearable></el-input>
      </el-form-item>
      <el-form-item :style='{"padding":"10px","margin":"0 0 10px","background":"#fff"}' label="客房价格"
                    prop="kefangjiage">
        <el-input v-model="ruleForm.kefangjiage" disabled
                  placeholder="客房价格" clearable></el-input>
      </el-form-item>
<!--      <el-form-item :style='{"padding":"10px","margin":"0 0 10px","background":"#fff"}' label="数量" prop="shuliang">
        <el-input v-model="ruleForm.shuliang"
                  placeholder="数量" clearable></el-input>
      </el-form-item>-->
      <el-form-item :style='{"padding":"10px","margin":"0 0 10px","background":"#fff"}' label="总价格" prop="zongjiage">
        <el-input v-model="zongjiage" placeholder="总价格" disabled readonly></el-input>
      </el-form-item>
      <el-form-item :style='{"padding":"10px","margin":"0 0 10px","background":"#fff"}' label="入住时间"
                    prop="xiadanshijian">
        <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="ruleForm.xiadanshijian"
            type="datetime"
            placeholder="入住时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item :style='{"padding":"10px","margin":"0 0 10px","background":"#fff"}' label="姓名" prop="xingming">
        <el-input v-model="ruleForm.xingming"
                  placeholder="姓名" clearable></el-input>
      </el-form-item>
      <el-form-item :style='{"padding":"10px","margin":"0 0 10px","background":"#fff"}' label="手机" prop="shouji">
        <el-input v-model="ruleForm.shouji"
                  placeholder="手机" clearable></el-input>
      </el-form-item>
      <el-form-item :style='{"padding":"10px","margin":"0 0 10px","background":"#fff"}' label="身份证"
                    prop="shenfenzheng">
        <el-input disabled v-model="ruleForm.shenfenzheng"
                  placeholder="身份证" clearable></el-input>
      </el-form-item>
      <el-form-item :style='{"padding":"10px","margin":"0 0 10px","background":"#fff"}' label="备注" prop="beizhu">
        <el-input v-model="ruleForm.beizhu"
                  placeholder="备注" clearable></el-input>
      </el-form-item>

      <el-form-item :style='{"padding":"0","margin":"0"}'>
        <el-button
            :style='{"border":"0","cursor":"pointer","padding":"0","margin":"0 20px 0 0","outline":"none","color":"rgba(255, 255, 255, 1)","borderRadius":"4px","background":"#000","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}'
            type="primary" @click="onSubmit">提交
        </el-button>
        <el-button
            :style='{"border":"0px solid rgba(64, 158, 255, 1)","cursor":"pointer","padding":"0","margin":"0","outline":"none","color":"#fff","borderRadius":"4px","background":"#666","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}'
            @click="back()">返回
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      baseUrl: '',
      ro: {
        yudingbianhao: false,
        kefangmingcheng: false,
        kefangleixing: false,
        kefangtupian: false,
        jiudianmingcheng: false,
        jiudiandizhi: false,
        kefangjiage: false,
        shuliang: false,
        zongjiage: false,
        xiadanshijian: false,
        xingming: false,
        shouji: false,
        shenfenzheng: false,
        beizhu: false,
        ispay: false,
      },
      type: '',
      userTableName: localStorage.getItem('UserTableName'),
      ruleForm: {
        yudingbianhao: this.getUUID(),
        kefangmingcheng: '',
        kefangleixing: '',
        kefangtupian: '',
        jiudianmingcheng: '',
        jiudiandizhi: '',
        kefangjiage: '',
        shuliang: 1,
        zongjiage: '',
        xiadanshijian: '',
        xingming: '',
        shouji: '',
        shenfenzheng: '',
        beizhu: '',
        ispay: '',
      },
      rules: {
        yudingbianhao: [],
        kefangmingcheng: [],
        kefangleixing: [],
        kefangtupian: [],
        jiudianmingcheng: [],
        jiudiandizhi: [],
        kefangjiage: [
          {validator: this.$validate.isNumber, trigger: 'blur'},
        ],
        shuliang: [
          {required: true, message: '数量不能为空', trigger: 'blur'},
          {validator: this.$validate.isIntNumer, trigger: 'blur'},
        ],
        zongjiage: [
          {validator: this.$validate.isNumber, trigger: 'blur'},
        ],
        xiadanshijian: [],
        xingming: [],
        shouji: [],
        /*shenfenzheng: [
          {validator: this.$validate.isIdCard, trigger: 'blur'},
        ],*/
        beizhu: [],
        ispay: [],
      },
    };
  },
  computed: {


    zongjiage: {
      get: function () {
        return 1 * this.ruleForm.kefangjiage * this.ruleForm.shuliang
      }
    },

  },
  created() {
    //this.bg();
    let type = this.$route.query.type ? this.$route.query.type : '';
    this.init(type);
    this.baseUrl = this.$config.baseUrl;
  },
  methods: {
    getMakeZero(s) {
      return s < 10 ? '0' + s : s;
    },
    // 下载
    download(file) {
      window.open(`${file}`)
    },
    // 初始化
    init(type) {
      this.type = type;
      if (type == 'cross') {
        var obj = JSON.parse(localStorage.getItem('crossObj'));
        for (var o in obj) {
          if (o == 'yudingbianhao') {
            this.ruleForm.yudingbianhao = obj[o];
            this.ro.yudingbianhao = true;
            continue;
          }
          if (o == 'kefangmingcheng') {
            this.ruleForm.kefangmingcheng = obj[o];
            this.ro.kefangmingcheng = true;
            continue;
          }
          if (o == 'kefangleixing') {
            this.ruleForm.kefangleixing = obj[o];
            this.ro.kefangleixing = true;
            continue;
          }
          if (o == 'kefangtupian') {
            this.ruleForm.kefangtupian = obj[o].split(",")[0];
            this.ro.kefangtupian = true;
            continue;
          }
          if (o == 'jiudianmingcheng') {
            this.ruleForm.jiudianmingcheng = obj[o];
            this.ro.jiudianmingcheng = true;
            continue;
          }
          if (o == 'jiudiandizhi') {
            this.ruleForm.jiudiandizhi = obj[o];
            this.ro.jiudiandizhi = true;
            continue;
          }
          if (o == 'kefangjiage') {
            this.ruleForm.kefangjiage = obj[o];
            this.ro.kefangjiage = true;
            continue;
          }
          if (o == 'shuliang') {
            this.ruleForm.shuliang = obj[o];
            this.ro.shuliang = true;
            continue;
          }
          if (o == 'zongjiage') {
            this.ruleForm.zongjiage = obj[o];
            this.ro.zongjiage = true;
            continue;
          }
          if (o == 'xiadanshijian') {
            this.ruleForm.xiadanshijian = obj[o];
            this.ro.xiadanshijian = true;
            continue;
          }
          if (o == 'xingming') {
            this.ruleForm.xingming = obj[o];
            this.ro.xingming = true;
            continue;
          }
          if (o == 'shouji') {
            this.ruleForm.shouji = obj[o];
            this.ro.shouji = true;
            continue;
          }
          if (o == 'shenfenzheng') {
            this.ruleForm.shenfenzheng = obj[o];
            this.ro.shenfenzheng = true;
            continue;
          }
          if (o == 'beizhu') {
            this.ruleForm.beizhu = obj[o];
            this.ro.beizhu = true;
            continue;
          }
        }
        this.ruleForm.shuliang = 1
      }
      // 获取用户信息
      this.$http.get(this.userTableName + '/session', {emulateJSON: true}).then(res => {
        if (res.data.code == 0) {
          var json = res.data.data;
          if ((json.xingming != '' && json.xingming) || json.xingming == 0) {
            this.ruleForm.xingming = json.xingming
          }
          if ((json.shouji != '' && json.shouji) || json.shouji == 0) {
            this.ruleForm.shouji = json.shouji
          }
          if ((json.shenfenzheng != '' && json.shenfenzheng) || json.shenfenzheng == 0) {
            this.ruleForm.shenfenzheng = json.shenfenzheng
          }
        }
      });
    },

    // 多级联动参数
    // 多级联动参数
    info(id) {
      this.$http.get('kefangyuding/detail/${id}', {emulateJSON: true}).then(res => {
        if (res.data.code == 0) {
          this.ruleForm = res.data.data;
        }
      });
    },
    // 提交
    onSubmit() {

      this.ruleForm.zongjiage = this.zongjiage
      var obj = JSON.parse(localStorage.getItem('crossObj'));
      this.ruleForm.kefangid = obj.id
      var table = localStorage.getItem('crossTable');
      /*obj.shuliang = obj.shuliang - this.ruleForm.shuliang
      if (obj.shuliang < 0) {
        this.$message.error("数量不足");
        return
      }*/

      //this.$http.post(table+`/update`, obj).then(res => {});
      //更新跨表属性
      var crossuserid;
      var crossrefid;
      var crossoptnum;
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          if (this.type == 'cross') {
            var statusColumnName = localStorage.getItem('statusColumnName');
            var statusColumnValue = localStorage.getItem('statusColumnValue');
            if (statusColumnName && statusColumnName != '') {
              var obj = JSON.parse(localStorage.getItem('crossObj'));
              if (!statusColumnName.startsWith("[")) {
                for (var o in obj) {
                  if (o == statusColumnName) {
                    obj[o] = statusColumnValue;
                  }
                }
                var table = localStorage.getItem('crossTable');
                this.$http.post(table + '/update', obj).then(res => {
                });
              } else {
                crossuserid = Number(localStorage.getItem('userid'));
                crossrefid = obj['id'];
                crossoptnum = localStorage.getItem('statusColumnName');
                crossoptnum = crossoptnum.replace(/\[/, "").replace(/\]/, "");
              }
            }
          }
          if (crossrefid && crossuserid) {
            this.ruleForm.crossuserid = crossuserid;
            this.ruleForm.crossrefid = crossrefid;
            var params = {
              page: 1,
              limit: 10,
              crossuserid: crossuserid,
              crossrefid: crossrefid,
            }
            this.$http.get('kefangyuding/list', {
              params: params
            }).then(res => {
              if (res.data.data.total >= crossoptnum) {
                this.$message({
                  message: localStorage.getItem('tips'),
                  type: 'success',
                  duration: 1500,
                });
                return false;
              } else {
                // 跨表计算
                var obj = JSON.parse(localStorage.getItem('crossObj'));
                var table = localStorage.getItem('crossTable');

                obj.shuliang = parseFloat(obj.shuliang) - parseFloat(this.ruleForm.shuliang)

                this.$http.post(table + `/update`, obj).then(res => {
                });
                this.$http.post('kefangyuding/add', this.ruleForm).then(res => {
                  if (res.data.code == 0) {
                    this.$message({
                      message: '操作成功',
                      type: 'success',
                      duration: 1500,
                      onClose: () => {
                        this.$router.go(-1);
                      }
                    });
                  } else {
                    this.$message({
                      message: res.data.msg,
                      type: 'error',
                      duration: 1500
                    });
                  }
                });
              }
            });
          } else {
            var obj = JSON.parse(localStorage.getItem('crossObj'));
            var table = localStorage.getItem('crossTable');

            obj.shuliang = parseFloat(obj.shuliang) - parseFloat(this.ruleForm.shuliang)

            this.$http.post(table + `/update`, obj).then(res => {
            });
            this.$http.post('kefangyuding/add', this.ruleForm).then(res => {
              if (res.data.code == 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.$router.go(-1);
                  }
                });
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration: 1500
                });
              }
            });
          }
        }
      });
    },
    // 获取uuid
    getUUID() {
      return new Date().getTime();
    },
    // 返回
    back() {
      this.$router.go(-1);
    },
    kefangtupianUploadChange(fileUrls) {
      this.ruleForm.kefangtupian = fileUrls.replace(new RegExp(this.$config.baseUrl, "g"), "");
      ;
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-date-editor.el-input {
  width: auto;
}

.add-update-preview .el-form-item /deep/ .el-form-item__label {
  padding: 0 10px 0 0;
  color: #666;
  font-weight: 500;
  width: 110px;
  font-size: 14px;
  line-height: 40px;
  text-align: right;
}

.add-update-preview .el-form-item /deep/ .el-form-item__content {
  margin-left: 110px;
}

.add-update-preview .el-input /deep/ .el-input__inner {
  border: 0;
  border-radius: 4px;
  padding: 0 12px;
  outline: none;
  color: #fff;
  background: #000;
  width: 300px;
  font-size: 14px;
  height: 40px;
}

.add-update-preview .el-select /deep/ .el-input__inner {
  border: 0;
  border-radius: 4px;
  padding: 0 10px;
  outline: none;
  color: #fff;
  background: #000;
  width: 200px;
  font-size: 14px;
  height: 40px;
}

.add-update-preview .el-date-editor /deep/ .el-input__inner {
  border: 0;
  border-radius: 4px;
  padding: 0 10px 0 30px;
  outline: none;
  color: #fff;
  background: #000;
  width: 200px;
  font-size: 14px;
  height: 40px;
}

.add-update-preview /deep/ .el-upload--picture-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  line-height: initial;
  vertical-align: middle;
}

.add-update-preview /deep/ .upload .upload-img {
  border: 1px dashed #ddd;
  cursor: pointer;
  border-radius: 6px;
  color: #fff;
  background: #000;
  width: 100px;
  font-size: 32px;
  line-height: 100px;
  text-align: center;
  height: 100px;
}

.add-update-preview /deep/ .el-upload-list .el-upload-list__item {
  border: 1px dashed #ddd;
  cursor: pointer;
  border-radius: 6px;
  color: #fff;
  background: #000;
  width: 100px;
  font-size: 32px;
  line-height: 100px;
  text-align: center;
  height: 100px;
}

.add-update-preview /deep/ .el-upload .el-icon-plus {
  border: 1px dashed #ddd;
  cursor: pointer;
  border-radius: 6px;
  color: #fff;
  background: #000;
  width: 100px;
  font-size: 32px;
  line-height: 100px;
  text-align: center;
  height: 100px;
}

.add-update-preview .el-textarea /deep/ .el-textarea__inner {
  border: 0;
  border-radius: 4px;
  padding: 12px;
  outline: none;
  color: #fff;
  background: #000;
  width: 400px;
  font-size: 14px;
  height: 120px;
}
</style>
